<script>
import {ref} from "vue";
import {useRouter} from "vue-router";
export default {
  name: "CustomHeader",
  props: {
    // title信息
    title: {
      type: String,
      default: ''
    },
    // 返回的路径
    back: {
      type: String,
      default: ''
    },
    // 是否显示返回标签
    noback: {
      type: Boolean,
      default: false
    }
  },
  emits: ['callback'], // 回调函数
  setup(props, ctx) {
    const isback = ref(props.noback);
    const router = useRouter();
    const goBack = () => {
      if (!props.back) {
        // 没有返回路径默认返回第一页
        router.go(-1);
      } else {
        // 有返回路径返回指定路径
        router.push({ path: props.back})
      }
      ctx.emit('callback');
    }
    return {
      isback,
      goBack
    }
  }
}
</script>

<template>
  <head class="custom-header van-hairline--bottom">
    <i v-if="!isback" class="nbicon nbfanhui" @click="goBack"></i>
    <i v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
    <div class="custom-header-name">{{ title }}</div>
    <i class="nbicon nbmore"></i>
  </head>
</template>
<div class="block"/>

<style scoped>
.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #252525;
  background: #fff;
  .custom-header-name {
    font-size: 14px;
  }
}
.block{
  height: 44px;
}
</style>
